﻿@page "/datepicker"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    DatePicker
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" class="rz-pb-4">
    Demonstration and configuration of the Radzen Blazor <strong>DatePicker</strong> component.
</RadzenText>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Get and Set the value of DatePicker
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    As all Radzen Blazor input components the <strong>DatePicker</strong> has a Value property which gets and sets the value of the component. Use <code>@@bind-Value</code> to get the user input.
</RadzenText>
<RadzenExample ComponentName="DatePicker" Example="DatePickerBindValue">
    <DatePickerBindValue />
</RadzenExample>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Get and Set the value of DatePicker using Value and Change event
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Value property can be used to set the value of the component and <code>Change</code> event to get the user input.
</RadzenText>
<RadzenExample ComponentName="DatePicker" Example="DatePickerChangeEvent">
    <DatePickerChangeEvent />
</RadzenExample>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    DatePicker with time
</RadzenText>
<RadzenExample ComponentName="DatePicker" Example="DatePickerWithTime">
    <DatePickerWithTime />
</RadzenExample>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Define hour format
</RadzenText>
<RadzenExample ComponentName="DatePicker" Example="DatePickerHourFormat">
    <DatePickerHourFormat />
</RadzenExample>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Time-only DatePicker
</RadzenText>
<RadzenExample ComponentName="DatePicker" Example="DatePickerTimeOnly">
    <DatePickerTimeOnly />
</RadzenExample>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    DatePicker with special or disabled dates
</RadzenText>
<RadzenExample ComponentName="DatePicker" Example="DatePickerSpecialDates">
    <DatePickerSpecialDates />
</RadzenExample>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    DatePicker with initial view date and year range
</RadzenText>
<RadzenExample ComponentName="DatePicker" Example="DatePickerInitialViewDate">
    <DatePickerInitialViewDate />
</RadzenExample>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Set Min and Max dates
</RadzenText>
<RadzenExample ComponentName="DatePicker" Example="DatePickerMinMax">
    <DatePickerMinMax />
</RadzenExample>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    DatePicker with custom footer
</RadzenText>
<RadzenExample ComponentName="DatePicker" Example="DatePickerFooterTemplate">
    <DatePickerFooterTemplate />
</RadzenExample>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    DatePicker with custom input parsing
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    The Radzen Blazor <strong>DatePicker</strong> has a parameter named <code>ParseInput</code> which allows for a fully custom parse-method. This way you can accept inputs like '3012' or '30122023' and support more than one input-format. Click on the 'Edit Source' to see the implementation.
</RadzenText>
<RadzenExample ComponentName="DatePicker" Example="DatePickerParseInput">
    <DatePickerParseInput />
</RadzenExample>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    DatePicker as calendar
</RadzenText>
<RadzenExample ComponentName="DatePicker" Example="DatePickerCalendar">
    <DatePickerCalendar />
</RadzenExample>